<script setup lang="ts" name="person-new">
  import { ref } from 'vue' //哪个是响应式就给哪个加
  //数据 原来是写在data中的 注意此时的数据不是响应式的
  let name = ref('张三')
  let age = ref(18)
  let tel = 1246549851

  console.log('name',name) //RefImpl 实例对象
  console.log('age',age)
  console.log(tel)


  function changeName () {
    name.value = '赵四'
    console.log(name)
  }
  function changeAge () {
    console.log(age)
    age.value += 1
  }
  function showTel () {
    alert(tel)
  }
</script>

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin:  0 15px;
}
</style>